<template>
    <div id="home">
     <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
     <tab-control class="tab-control" :title="['流行','新款','精选']" @adClick="btClick" ref="tabControl1" v-show="isFixed"></tab-control>
     <scroll class="content" ref="content" :probe-type="3" @rscroll="contentScroll" :pull-up-load="true" @pullingUp="finishLoad">
     <home-swiper :banners="banners" @imageLoad="imageLoadSwiper"></home-swiper>
     <home-recommend :recommends="recommends"></home-recommend>
     <home-feature></home-feature>
     <tab-control :title="['流行','新款','精选']" @adClick="btClick" ref="tabControl2"></tab-control>
     <good-list :goods="goods[ indexCurrent].list"></good-list>
     </scroll>
     <back-top @click.native="topClick" v-show="isShow"></back-top>
    </div>
</template>
<script>

import HomeSwiper from './childComps/HomeSwiper.vue'
import HomeRecommend from './childComps/HomeRecommend.vue'
import HomeFeature from './childComps/HomeFeature.vue'

import NavBar from 'components/common/navbar/NavBar'
import TabControl from 'components/content/tabControl/TabControl.vue'
import GoodList from 'components/content/goods/GoodList.vue'
import Scroll from 'components/common/scroll/Scroll.vue'
import BackTop from 'components/content/backtop/BackTop.vue'

import {HomeData,HomeGoods} from 'network/home'
// import {debounce} from 'common/utils'
import {listenerMixin} from 'common/mixin'
export default {
      name:'Home',
      components:{
          HomeSwiper,
          HomeRecommend,
            HomeFeature,
             NavBar,
            TabControl,
            GoodList,
            Scroll,
            BackTop,
      },
      data(){
          return{
          banners:[],
          recommends:[],
          goods:{
              'pop':{page:0,list:[]},
              'new':{page:0,list:[]},
              'sell':{page:0,list:[]}
          },
          indexCurrent:'pop',
          isShow:false,
          offsetTop:0,
          isFixed:false,
          saveY:0,
          mixins:[listenerMixin]
          }
      },
      created(){
      this.HomeData()
      this.HomeGoods('pop')
      this.HomeGoods('new')
      this.HomeGoods('sell')
      },
      mounted(){
      },
      activated(){
        this.$refs.content.scrollTo(0,this.saveY,0)
        this.$refs.content.refresh()  
      },
      deactivated(){
         this.saveY=this.$refs.content.getScrollY()
         console.log(this.saveY)
         this.$bus.$off("overImg",this.itemListener)
      },
      computed:{
          showGoods(){
              return this.goods[this.indexCurrent].list
          }
      },
      methods:{
       imageLoadSwiper(){
         this.offsetTop=this.$refs.tabControl2.$el.offsetTop
        // console.log(this.$refs.tabControl.$el.offsetTop)
       },
       HomeData(){
           HomeData().then(res=>{
            //    console.log(res)
           this.banners=res.data.banner.list;
           this.recommends=res.data.recommend.list;
           })  
       },
       HomeGoods(type){
         const page=this.goods[type].page+1;
         HomeGoods(type,page).then(res=>{
             console.log(res)
           this.goods[type].list.push(...res.data.list);
           this.goods[type].page+=1;
           this.$refs.content.finishPullUp();
         })
       },
       btClick(index){
       switch(index){
           case 0:
           this.indexCurrent='pop'
           break
           case 1:
           this.indexCurrent='new'
           break
           case 2:
           this.indexCurrent='sell'
           break
       }
       if(this.$refs.tabControl1!==undefined){
        this.$refs.tabControl1. currentIndex=index;
        this.$refs.tabControl2. currentIndex=index;
       }
       },
       topClick(){
           this.$refs.content.scrollTo(0,0,500)
       },
       contentScroll(position){
           this.isShow=(-position.y)>1000
           this.isFixed=(-position.y)>535
       },
       finishLoad(){
           this.HomeGoods(this.indexCurrent)
       }
      }
}
</script>
<style scoped>
    #home{height: 100vh;position: relative;}
    .home-nav{background-color:  var(--color-tint);color: white;}
    .tab-control{position:relative;z-index: 9;}
    .content{ overflow: hidden; position: absolute;top: 44px; bottom: 49px; left: 0; right: 0;}
</style>